<template>

	<!-- {{menuItem ? "修改菜单" : "添加菜单"}} -->
<div v-if="menuItem">
	<!-- <h2><el-button @click="goback" style="margin: 20px 20px;">返回</el-button>分销商品详情</h2> -->
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
	        <span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
	            <el-icon><ArrowLeft /></el-icon>
	            <span @click="goback">返回</span>
	            <span style="margin-left: 10px;">|</span>
	        </span>
	        <h3>分销商品详情</h3>
	    </div>
	<div class="item1" style="margin-left: 15px;">
		<h3>商品信息</h3>
		<div style="margin-left: 100px;">
			<div style="display: flex;">
				<span style="margin-right: 10px;">商品图片</span>
				<img :src="downloadUrl+goodInfo.goodsImage" class="avatar" />
			</div>
			<div>
				<span style="margin-right: 10px;">商品名称</span>
				<span>{{goodInfo.goodsName}}</span>
			</div>
			
		</div>
	</div>
	<div class="item2" style="margin-left: 15px;">
		<h3>佣金设置</h3>
		<!-- <div style="margin-left: 70px;">
			<el-form-item label="分销计算价格" label-width="110px" style="fontSize: 14px;color: black;">
				<el-table :data="goodsdata" style="width: 100%" >
				    <el-table-column label="商品信息">
						<template #default="{ row }">
							{{row.goodsName}}
							<img :src="downloadUrl+row.goodsImage" class="avatar" />
							
						</template>
					</el-table-column>
					<el-table-column label="销售价">
						<template #default="{ row }">
							{{row.priceOriginal}}￥
						</template>
					</el-table-column>
					<el-table-column label="成本价">
						<template #default="{ row }">
							{{row.priceBasic}}￥
						</template>
					</el-table-column>
					<el-table-column prop="priceVolume" label="分销计算价"></el-table-column>
				</el-table>
				<p style="font-style: 20px;">未设置分销计算价以该商品实付金额来计算佣金</p>
			</el-form-item>
		</div> -->
		<div>
			<div class="mya" style="display: flex; margin-left: 70px; font-size: 14px;">
				<p style="margin-left: 30px; margin-right: 10px;">佣金规则</p>
				<p>{{goodsdata.defaultDistribution=="0" ? "默认设置" : "单独设置"}}</p>
			</div> 
			<el-form-item style="margin-left: 100px;">
				
				<el-table :data="Dislevel" style="width: 100%">
				    <!-- <el-table-column label="商品规格">
						<template #default="{ row }">
							{{row.levelName}} -->
							 <!-- {{row.specification[row.specificationState].specificationOne}} -->
							 <!-- 1111
							{{row.specificationOne}}
							{{row.specificationTwo}}
							{{row.specificationThree}} -->
							 	
						<!-- </template> -->
					<!-- </el-table-column> -->
					
					<el-table-column label="等级名称">
						<template #default="{ row }">
							{{row.levelName}}
						</template>
					</el-table-column>
					<el-table-column label="一级佣金比例">
						<template #default="{ row }">
							{{row.firstLevel}}
						</template>
					</el-table-column>
					<el-table-column label="二级佣金比例">
						<template #default="{ row }">
							{{row.secondLevel}}
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</div>
	</div>
</div>

<div v-else>
	<!-- <h2><el-button @click="goback" style="margin: 20px 20px;background-color: ;">返回</el-button>佣金设置</h2> -->
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
	        <span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
	            <el-icon><ArrowLeft /></el-icon>
	            <span @click="goback">返回</span>
	            <span style="margin-left: 10px;">|</span>
	        </span>
	        <h3>佣金设置</h3>
	    </div>
	<ul>
		<li>分销商层级与后台配置有关，最多而二级分销</li>
		<li>分销商等级与分销商的订单数，分销订单总额，自购总额，自购订单数，自购订单总额，分销订单总额，分销商下线人数，分销商的下级分销商人数有关</li>
		<li>商品分销总佣金不得超过商品实际价格的50%</li>
	</ul>
	<div class="item1" style="margin-left: 15px;">
		<h3>商品信息</h3>
		<div style="margin-left: 100px;">
			<div style="display: flex;">
				<span style="margin-right: 10px;">商品图片</span>
				<img :src="downloadUrl+goodInfo.goodsImage" class="avatar" />
			</div>
			<div>
				<span style="margin-right: 10px;">商品名称</span>
				<span>{{goodInfo.goodsName}}</span>
			</div>
		</div>
	</div>
	<div class="item2" style="margin-left: 15px;">
		<h3>佣金设置</h3>
		<div style="margin-left: 70px;">
			<el-form-item label="分销计算价格" label-width="110px" style="fontSize: 14px;color: black;">
				 <div>
					 <el-radio-group v-model="tableshow">
					   <el-radio :value="1" >参与</el-radio>
					   <el-radio :value="0">不参与</el-radio>
					 </el-radio-group>
				 </div>
				 <p style="font-size: 10px;color:#ccc;">设置参与分销时，佣金会按照如下规则进行计算，如果有分销计算价则分销计算价优先。佣金 = 销售价*对应分销等级比例 / 佣金 = 分销计算价*对应分销等级比例</p>
			</el-form-item>
			
		
			
			<div v-if="tableshow==1">
				<div class="mya" style="display: flex; font-size: 14px; margin-left: 50px">
					<el-form-item label="佣金规则" >
					<!-- <p>{{goodsdata.defaultDistribution=="0" ? "默认设置" : "单独设置"}}</p> -->
					<el-radio-group v-model="setrule" >
					  <el-radio :value="0">默认设置</el-radio>
					  <el-radio :value="1" >单独设置</el-radio>
					</el-radio-group>
					</el-form-item>
				</div> 
				<el-form-item   v-if="setrule==0">
					<el-table :data="Dislevel" style="width: 100%">
					    <el-table-column label="默认规则">
							<template #default="{ row }">
								{{row.levelName}}
							</template>
						</el-table-column>
						<!-- <el-table-column label="金额">
							<template #default="{ row }">
								{{row.aloneMoney}}￥
								
							</template>
						</el-table-column>
						<el-table-column label="分销商等级名称">
							<template #default="{ row }">
								{{row.levelName}}
							</template>
						</el-table-column> -->
						<el-table-column label="一级佣金比例">
							<template #default="{ row }">
								{{row.firstLevel}}
							</template>
						</el-table-column>
						<el-table-column label="二级佣金比例">
							<template #default="{ row }">
								{{row.secondLevel}}
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item  style="margin-left: 0px;" v-if="setrule==1">
					<el-table :data="Dislevel" style="width: 100%">
					    <!-- <el-table-column label="商品规格">
							<template #default="{ row }">
								---
							</template>
						</el-table-column>
						<el-table-column label="金额">
							<template #default="{ row }">
								{{row.aloneMoney}}￥
								
							</template>
						</el-table-column> -->
						<el-table-column label="单独规则">
							<template #default="{ row }">
								{{row.levelName}}
							</template>
						</el-table-column>
						<el-table-column label="一级佣金比例">
							<template #default="{ row }">
								<el-input v-model="row.firstLevel" style="width: 150px">
									<template #append>%</template>
								</el-input>
							</template>
							
						</el-table-column>
						<el-table-column label="二级佣金比例">
							<template #default="{ row }">
								<el-input v-model="row.secondLevel" style="width: 150px">
									<template #append>%</template>
								</el-input>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				
			</div>	
			<div style="text-align: center;">
				<el-button style="margin-right: 15px;" type="primary" @click="save">保存</el-button><el-button @click="goback">返回</el-button>
			</div>
		</div>
	</div>
</div>
</template>

<script setup>
	import { downloadUrl,baseUrl } from "@/utils/request";
	import {
		defineEmits,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import { ArrowLeft } from "@element-plus/icons-vue";
	 // import { ArrowLeft } from "@element-plus/icons-vue"; 
	import {
			disgoodsDel,
			DisgoodsDelLevel,
			Alonedisset,
			updateAlonedisset,
			addgoodJoin,
			concelgoodJoin,
			disLevellist
		} from "@/api";
	import { ElMessage } from "element-plus";
	let goodInfo=reactive({})
	let Dislevel=ref([])
	let goodsdata=ref([])
	let specificationtil=ref([])
	const tableData=ref([])
	const tableshow=ref()
	const setrule=ref()
	// let arr=ref([
	// 	{
	// 		distributionLevelId:
	// 		aloneMoney:
	// 		firstLevel:
	// 		secondLevel:
	// 		goodsId:
	// 	},
		
	// ])
	const disgoodsdel=async()=>{
		goodInfo=JSON.parse(sessionStorage.getItem("GoodInfo"))
		tableshow.value= Number(goodInfo.goodsDistribution)
		setrule.value=Number(goodInfo.defaultDistribution)
		goodsdata.value.push(goodInfo)
		specificationtil=goodsdata.value[0].specification
		// console.log(specificationtil);
	
	}
	let pageIndex=ref(1);
	let pageSize=10;
	let arr=ref([])
	//分销等级列表
	const getdisLevellist = async ()=>{
		let res=await disLevellist({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		// console.log("等级",res)
		arr.value=res.list
		arr.value.forEach(v=>{
			let obj={
				levelName:v.levelName,
				distributionLevelId:v.distributionLevelId,
				firstLevel:v.firstLevel,
				secondLevel:v.secondLevel,
				aloneMoney:0,
				goodsId: JSON.parse(sessionStorage.getItem("GoodInfo")).goodsId.toString()
			}
			Dislevel.value.push(obj)
		})
		// Dislevel.value=arr.value
		// console.log("Dislevel",Dislevel.value);
	}

	if(sessionStorage.getItem("disgoodsDelLevel")!="undefined"){
		Dislevel.value=JSON.parse(sessionStorage.getItem("disgoodsDelLevel"))
	}
	else{
		getdisLevellist ()
		// console.log("Dislevel",Dislevel.value);
	}
	// console.log(Dislevel);
	// console.log(JSON.parse(sessionStorage.getItem("disgoodsDelLevel")));
	
	
	const menuItem=ref(null)
	const message = ref(true)
	const emit = defineEmits(['update-message',"regetlist"]);
	const goback = async () => {
		emit('update-message', message);
		sessionStorage.removeItem("leveldetail")
		// sessionStorage.removeItem("disgoodsDelLevel")
	}
	
	const join=async()=>{
		let res=await addgoodJoin([JSON.parse(sessionStorage.getItem("GoodInfo")).goodsId.toString()])
		// console.log("详情参与分销",res);
		// if(typeof(res)=="object"){
			
		// 	ElMessage({
		// 		message:"保存成功",
		// 		type:"success"
		// 	})
		// 	setTimeout(()=>{
		// 		emit('update-message', message);
		// 	},800)
		// }
		emit("regetlist")
	}
	const nojoin= async()=>{
		let res=await concelgoodJoin([Number(JSON.parse(sessionStorage.getItem("GoodInfo")).goodsId)])
		if(typeof(res)=="object"){
			ElMessage({
				message:"保存成功",
				type:"success"
			})
			setTimeout(()=>{
				emit('update-message', message);
			},800)
		}
		// console.log("详情取消分销",res);
		emit("regetlist")
		// tableshow.value=1
	}	
	
	//设置商品未默认分销
	// const autoset=()=>{
	// 	// tableshow.value=0
	// }
	
	//设置商品单独分销规则
	const aloneset= async()=>{
		let arrObj=ref([])
		Dislevel.value.forEach(v=>{
			let obj={
				distributionLevelId:v.distributionLevelId.toString(),
				firstLevel:v.firstLevel,
				secondLevel:v.secondLevel,
				aloneMoney:0,
				goodsId: JSON.parse(sessionStorage.getItem("GoodInfo")).goodsId.toString()
			}
			arrObj.value.push(obj)
		})
		console.log("arrObj",arrObj.value);
		let res= await Alonedisset(arrObj.value)
		// console.log(res);
		if(typeof(res)=="object"){
			ElMessage({
				message:"保存成功",
				type:"success"
			})
			setTimeout(()=>{
				emit('update-message', message);
			},800)
		}
		emit("regetlist")
		// tableshow.value=0
	}
	//修改单独分销模式数据
	const updataAloneSet= async()=>{
		// console.log("10000000",Dislevel.value);
		let res= await updateAlonedisset(Dislevel.value)
		// console.log(res);
		if(typeof(res)=="object"){
			ElMessage({
				message:"保存成功",
				type:"success"
			})
			setTimeout(()=>{
				emit('update-message', message);
			},800)
		}
	}
	const save=()=>{
		// console.log(Dislevel.value)
		//初始状态参与分销
		if(tableshow.value==1){
			join()
			if(sessionStorage.getItem("disgoodsDelLevel")!="undefined"){
				updataAloneSet()
			}else{
				if(setrule.value==1){
					aloneset()
				}
			}
		}
		if(tableshow.value==0){
			nojoin()
		}
		
		// if(sessionStorage.getItem("disgoodsDelLevel")!="undefined"){
		// 	updataAloneSet()
			
		// }else{
		// 	if(setrule.value==1){
		// 		aloneset()
		// 	}
		// }
	}
	const countprice=ref(0)
	onMounted(()=>{
		if(sessionStorage.getItem("DelRe")==1){
			menuItem.value=true
		}else{
			menuItem.value=false
		}
		disgoodsdel()
	})
</script>

<style lang="less" scoped>
	// .item1.item2{
	// 	margin-left: 15px;
	// }
	img{
		height: 100px;
		}
	ul{
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height:100px;
		background-color: #e9ecfd;
		list-style: none;
		font-size: 12px;
		margin:0px 0px 20px 20px;
		li{
			margin-bottom:10px;
			
		}
	}
	
</style>